<template>
	<u-popup v-model="value" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
		close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
		<view class="area-box">
			<scroll-view :scroll-y="true" style="height: 100%">
				<uni-list  :border="true" v-for="item in list" :key="item.itemId">
					<uni-list-item @click="listItemClick(item)" :clickable="true" :title="item.itemName" :note="convertNote(item)"
						:rightText="convertUnitmeasure(item.unitOfMeasure)">
					</uni-list-item>
				</uni-list>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	import {
		listMdItemProduct
	} from "@/api/common/commonApi"

	export default {
		name: 'itemSelect',
		props: {
			itemOrProduct: {
				type: String,
				default: 'item'
			},
			// 通过双向绑定控制组件的弹出与收起
			value: {
				type: Boolean,
				default: false
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				list: [],
				query: {}
			}
		},
		mounted() {
			this.init();
		},
		computed: {
			uZIndex() {
				// 如果用户有传递z-index值，优先使用
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
		methods: {
			init() {
				this.getDataList();
			},
			listItemClick(item){
				this.$emit('itemSelected', item);
				this.$emit('input', false);
			},
			getDataList() {
				listMdItemProduct(this.query, this.itemOrProduct).then(res => {
					this.list = res.data;
				})
			},
			close() {
				this.$emit('input', false);
			},
			convertNote(item) {
				return `物料编码：${item.itemCode} , 物料规格: ${ this.$isNotEmpty(item.specification)? item.specification:'' }`;
			},
			convertUnitmeasure(unitOfMeasure){
				return `单位: ${this.$convertUnitmeasure(unitOfMeasure)}`
			}
		}

	}
</script>
<style lang="scss">
	/deep/ .uni-list-item__content-title {
		font-size: 18px;
	}

	/deep/ .uni-list-item__content-note {
		font-size: 16px;
	}

	/deep/ .uni-list-item__extra-text {
		font-size: 16px;
		color: #7da6ec;
	}


	.area-box {
		width: 100%;
		overflow: hidden;
		height: 800rpx;

		>view {
			width: 150%;
			transition: transform 0.3s ease-in-out 0s;
			transform: translateX(0);

			&.change {
				transform: translateX(-33.3333333%);
			}
		}

		.area-item {
			width: 33.3333333%;
			height: 800rpx;
		}
	}
</style>